<script setup lang="ts">
import type { RenderContent } from '@arco-design/web-vue/es/_utils/types'
import type { GtmInstanceItem } from '@/apis/model/dns'
import { Message } from '@arco-design/web-vue'
import {
  deleteDnsAuthorityGtmInstanceApi,
  getDnsAuthorityGtmInstancesApi,
} from '@/apis/modules/dns'
import { commonTableProps } from '@/utils/table'
import EditDialog from './components/EditDialog.vue'
import useConfig from './useConfig'

const router = useRouter()
const { tableColumns, appList } = useConfig()
const queryParams = ref({ name_keyword: '' })

const { loading, pagination, data, run } = useListRequest(
  getDnsAuthorityGtmInstancesApi,
  {
    params: queryParams,
    immediate: true,
  },
)

const {
  visible: editDialogVisible,
  open: openEditDialog,
  data: editDialogData,
} = usePopup()
// 删除
function handleDelete(record: GtmInstanceItem) {
  ModalHelper.error({
    title: '删除实例',
    content: h('div', null, [
      '确定要删除 “',
      h('span', { class: 'text-[#FA5566]' }, `${record.name || '-'}`),
      '” 实例吗？',
    ]) as unknown as RenderContent,
    okText: '删除',
    width: 480,
    closable: false,
    onOk: async () => {
      await deleteDnsAuthorityGtmInstanceApi({ id: record.id })
      await run()
      Message.success('删除成功')
    },
  })
}
function openInstanceDetail(record: GtmInstanceItem) {
  router.push({ name: 'DnsInstanceManagement', params: { id: record?.id } })
}
const { createSortChange } = useTable(run, data)
const onSorterChange = createSortChange(queryParams)
</script>

<template>
  <main-container
    v-model:pagination="pagination"
    :loading="loading"
    @run="run"
  >
    <template #header>
      <div class="flex space-x-4">
        <a-button
          type="primary"
          @click="openEditDialog()"
        >
          新建实例
        </a-button>
        <a-input-search
          v-model="queryParams.name_keyword"
          placeholder="请输入实例名称搜索"
          class="!w-58"
          allow-clear
          @clear="run()"
          @search="run()"
          @keydown.enter="run()"
        />
      </div>
    </template>

    <a-table
      v-bind="commonTableProps"
      :columns="tableColumns"
      :data="data"
      @sorter-change="onSorterChange"
    >
      <template #appId="{ record }">
        {{ getOptionLabel(record?.app_id, appList) }}
      </template>
      <template #domainName="{ record }">
        {{ record?.record_name || '-' }}.{{ record?.domain_name || '-' }}
      </template>

      <template #addressPoolType="{ record }">
        {{ getOptionLabel(record?.address_pool_type, poolTypeOptions) }}
      </template>
      <template #ttl="{ record }">
        {{ getOptionLabel(record?.ttl, ttlOptions) }}
      </template>

      <template #actions="{ record }">
        <a-link
          :hoverable="false"
          @click="openInstanceDetail(record)"
        >
          <i-icons-application size="16px" />
        </a-link>
        <a-link
          :hoverable="false"
          status="danger"
          @click="handleDelete(record)"
        >
          <i-icons-delete size="16px" />
        </a-link>
      </template>
    </a-table>
  </main-container>
  <edit-dialog
    v-model:visible="editDialogVisible"
    :record="editDialogData"
    @reload="run"
  />
</template>

<style scoped>
:deep(.arco-table-tr) {
  .table-icon {
    opacity: 0;
    color: var(--color-text-7);
    cursor: pointer;
  }

  &:hover {
    .table-copy-text {
      @apply text-primary;
    }

    .table-icon {
      opacity: 1;
      color: #00a65b;
    }
  }
}
</style>
